<%--
  Created by IntelliJ IDEA.
  User: zk
  Date: 2017/11/9
  Time: 10:31
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<blockquote class="layui-elem-quote">${title}</blockquote>

<div class="layui-row">
    <div class="layui-col-xs12 layui-col-md5">
        <form class="layui-form" action="${ctx}/sys/role/save" layui-filter="f" data-pjax>
            <input type="hidden" value="${role.id}" name="id">
            <input type="hidden" name="menuIds" value="${role.menuIds}" id="menuIds">
            <div class="layui-form-item">
                <label class="layui-form-label ">角色英文名</label>
                <div class="layui-input-block ">
                    <input value="${role.name}" type="text" name="name" lay-verify="required" lay-verType="tips" placeholder="请输入英文名称" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label ">角色中文名</label>
                <div class="layui-input-block ">
                    <input value="${role.zhName}"  name="zhName" lay-verify="required" lay-verType="tips"  placeholder="请输入中文名称" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block ">
                    <button class="layui-btn  " lay-filter="roleSave" lay-submit="" >保存</button>
                    <a class="layui-btn  layui-btn-primary" href="${ctx}/sys/role/" data-pjax>返回</a>
                </div>
            </div>
        </form>
    </div>
    <div class="layui-col-xs12 layui-col-md6 layui-col-md-offset1">
        <blockquote class="layui-elem-quote layui-quote-nm">选择授权菜单</blockquote>
        <div id="tree"></div>
    </div>
</div>

<script>
    var treeView;

    function setMenuIds() {
        if(treeView) {
            var nodes = treeView.treeview('getChecked');
            var ids = [];
            for(var i=0; i<nodes.length; i++) {
                ids.push(nodes[i].id);
            }
            $("#menuIds").val(ids);
        }
    }

    $(function(){
        var form = layui.form;
        form.render();
        form.on('submit(roleSave)', function(data){
            setMenuIds();
            return true;
        });


        ajaxPost('${ctx}/sys/menu/treeData', {
            'defaultCheckedId': '${role.menuIds}'
        },function(respData){
            treeView = $('#tree')
                .treeview({data: respData,showCheckbox: true})
                .treeview('expandAll', { levels: 1, silent: true })
                .on('nodeChecked', function(event, node) {
                    recurNodeCheckStatusUp(treeView, node, true);
                    recurNodeCheckStatusDown(treeView, node, true);
                }).on('nodeUnchecked', function(event, node) {
                recurNodeCheckStatusUp(treeView, node, false);
                recurNodeCheckStatusDown(treeView, node, false);
            });
        });
    });

    function recurNodeCheckStatusUp(treeView, node, checked) {
        var parentNode = treeView.treeview('getParent', node);
        var siblings = treeView.treeview('getSiblings', node);
        if(parentNode && parentNode.state) {
            if(checked) {
                treeView.treeview('checkNode', [ parentNode.nodeId, { silent: true}]);
                recurNodeCheckStatusUp(treeView, parentNode, checked);
            }else {
                //判断兄弟节点是否还有勾选状态的，否则全部去掉勾选
                var doUncheck = true;
                if(siblings.length>0) {
                    for(var i=0;i<siblings.length;i++) {
                        if(siblings[i].state && siblings[i].state.checked && siblings[i].state.checked==true) {
                            doUncheck = false;break;
                        }
                    }
                }
                if(doUncheck == true) {
                    treeView.treeview('uncheckNode', [ parentNode.nodeId, { silent: true}]);
                    recurNodeCheckStatusUp(treeView, parentNode, checked);
                }
            }

        }
    }

    /**
     * 向下检测节点勾选状态
     * @param treeView
     * @param node
     * @param checked
     */
    function recurNodeCheckStatusDown(treeView, node, checked) {
        if(!node) return;
        if(node.nodes && node.nodes.length>0) {
            var nodes = node.nodes;
            for(var i=0;i<nodes.length;i++) {
                if(checked) {
                    treeView.treeview('checkNode', [ nodes[i].nodeId, { silent: false}]);
                }else {
                    treeView.treeview('uncheckNode', [ nodes[i].nodeId, { silent: false}]);
                }
            }
        }
    }

</script>